import { Button, Calendar, CapsuleTabs, Input, Mask, NavBar } from "antd-mobile";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import { useState } from "react";
import { setDate, setEnd, setStart } from "../../store/home/homeSlice";
import withLogin from "../../Components/withLogin";

const Home = () => {
  const city = useSelector((state) => state.city.city);
  const navigate = useNavigate();
  const { start, end, date } = useSelector((state) => state.home);
  const [visible, setVisible] = useState(false);
  const dispatch = useDispatch();

  const handleQuery = () => {
    console.log(start, end, date);
    navigate('/city')
  };
  const handleSwitch = () => {
    dispatch(setStart(end));
    dispatch(setEnd(start));
  };

  const handleClick = () => {
    setVisible(true);
  };
  return (
    <div>
      <NavBar
        left={<span onClick={() => navigate("city")}>{city}</span>}
        backIcon={false}
      >
        首页
      </NavBar>

      <div>  
        <CapsuleTabs>
          <CapsuleTabs.Tab title='火车' key='火车'>
          <div style={{ display: "flex" }}>
          <Input
            value={start}
            onChange={(e) => dispatch(setStart(e))}
            placeholder="出发地"
            onClick={()=>navigate('/city')}
          ></Input>
          <span onClick={() => handleSwitch()}>换一换</span>
          <Input
            value={end}
            onChange={(e) => dispatch(setEnd(e))}
            placeholder="目的地"
            onClick={()=>navigate('/city')}
          ></Input>
        </div>
        <Input
          value={date}
          placeholder="出发日期"
          onClick={() => handleClick()}
        ></Input>
        <Button type="submit" color="primary" onClick={() => handleQuery()}>
          查询
        </Button>
          </CapsuleTabs.Tab>
          <CapsuleTabs.Tab title='机票' key='机票'>
          机票
          </CapsuleTabs.Tab>
        </CapsuleTabs>
        
      
      </div>

      <Mask visible={visible}>
        <div style={{ background: "white", padding: "10px" }}>
          <Calendar
            defaultValue={new Date()}
            selectionMode="single"
            min={new Date()}
            max={new Date("2025-03-28")}
            onChange={(val) => {
              setVisible(false);
              dispatch(setDate(val.toLocaleDateString()));
            }}
          />
        </div>
      </Mask>
    </div>
  );
};

export default withLogin(Home);
